<template>
    <div>
        <div>
            <i-button type="primary">修改信息</i-button>
            <i-button type="primary">积分管理</i-button>
            <i-button type="primary">账户管理</i-button>
            <!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
        </div>

        <div class="tableContent">
            <Table height="800" border highlight-row :columns="tableHeader" :data="tableContent"></Table>
        </div>

        <div>
            <Modal
                v-model="modal1"
                :transfer='false'
                :footer-hide='true'
                :width='40'
                headler="关闭"
                title="用户编辑">
                <div>
                    <div v-show="false">
                        <Label>主键</Label>
                        <Input type="text" maxlength="20" v-model="user.id"/>
                    </div>
                    <div>
                        <Label>昵称</Label>
                        <Input type="text" maxlength="20" v-model="user.nickName"/>
                    </div>
                    <div>
                        <Label>姓名</Label>
                        <Input type="text" maxlength="20" v-model="user.trueName"/>
                    </div>
                    <div>
                        <Label>手机号</Label>
                        <Input type="text" maxlength="11" v-model="user.userMobile"/>
                    </div>

                    <div>
                        <Button type="primary">保存</Button>
                    </div>
                </div>
            </Modal>
        </div>

    </div>
</template>

<script>
    import $ from '../../../lib/util';
    import qs from 'qs';
    export default {
        name: 'g',
        data(){
            return {
                modal1: false,
                user:{
                    id: '1',
                    userName: '4',
                    nickName:'2',
                    trueName: '3',
                    userMobile:'5'
                },
                tableHeader: [
                    {
                        type: 'index',
                        width: 100,
                        align: 'center',
                        title: '序号'
                    },
                    {
                        title: '昵称',
                        key: 'nickName'
                    },
                    {
                        title: '姓名',
                        key: 'trueName'
                    },
                    {
                        title: '手机号',
                        key: 'userMobile'
                    },
                    {
                        title: '启用表示',
                        key: 'flag',
                        align:'center',
                        render: function (h, params) {
                            return h('div', [
                                h('Checkbox', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        value: params.row.flag=='AVAILABLE',
                                        disable: !params.row.flag=='AVAILABLE',
                                    },
                                    on: {
                                        'on-change': function (val) {
                                            let flag = val ? 0 : 1;
                                            let json = {
                                                'id':params.row.id,
                                                'flag': flag
                                            };
                                            $.ajax.post('/menu/update/',qs.stringify(json)).then(res=>{
                                                console.log(res.msg);
                                            });
                                        }
                                    }
                                }),
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        width: 250,
                        align: 'center',
                        render: (h, params)=>{
                            return h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click:() =>{
                                        //console.log(params.row.id);
                                        this.modal1 = true;
                                        this.user = params.row;
                                    }
                                }
                            },'编辑')
                        }
                    }
                ],
                tableContent: []
            }
        },
        mounted() {
            const _this = this;
            $.openProcessLoading(_this, '正在load数据');
            $.ajax.get('/user/list').then(res => {
                $.closeProcessLoading(_this);
                _this.tableContent = res.msg;
            });
        },
        methods: {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .tableContent{
        padding-top: 10px;
    }
</style>
